<nz-card
  style="width: 100%"
  [nzBordered]="false"
  [nzExtra]="extraTemplate"
  [nzTitle]="titleTemplate"
  [nzActions]="[agreeTemplate, disagreeTemplate]"
>
  <nz-table #rowSelectionTable [nzShowPagination]="false" [nzData]="scopes">
    <thead>
      <tr>
        <th
          [nzChecked]="checked"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="onAllChecked($event)"
          nzWidth="50px"
          nz-tooltip
          nzTooltipTitle="全选"
          nzTooltipPlacement="right"
          nzTooltipColor="green"
        ></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @for (item of rowSelectionTable.data; track $index) {
        <tr>
          <td
            [nzChecked]="setOfCheckedScope.has(item.scope)"
            [nzLabel]="item.scope"
            (nzCheckedChange)="onItemChecked(item.scope, $event)"
          ></td>
          <td>
            <h3 nz-typography>{{ item.scope }}</h3>
            <p nz-typography nzEllipsis> {{ item.description }} </p>
          </td>
        </tr>
      }
    </tbody>
  </nz-table>
</nz-card>
<ng-template #titleTemplate>
  <h3 nz-typography>{{ consentResult.clientName }} 客户端</h3>
  <p nz-typography nzEllipsis> 此第三方应用请求获得以下权限 </p>
</ng-template>
<ng-template #extraTemplate>
  <span>账号：</span><b>{{ consentResult.principalName }}</b>
</ng-template>
<ng-template #agreeTemplate>
  <span nz-icon nzType="check" (click)="consent(true)"></span>
</ng-template>
<ng-template #disagreeTemplate>
  <span nz-icon nzType="close" (click)="consent(false)"></span>
</ng-template>
